<template>
    <view>
        <view class="lg-img-title">
            <img src="@/static/image/login.jpg" alt="" class="lg-img" />
        </view>
        <view class="lg-tab-title">
            <u-tabs
                itemStyle="padding-left: 15px; padding-right: 15px; height: 45px;"
                :list="tabList"
                @click="tabClick"
                class="lg-tab"
                lineWidth="70"
            ></u-tabs>
        </view>
        <view class="lg-tab-content">
            <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
                <u-form-item label="" prop="account" borderBottom ref="item1">
                    <u--input v-model="formData.account" placeholder="手机号/用户名" border="bottom"></u--input>
                </u-form-item>
                <u-form-item label="" prop="password" borderBottom ref="item2">
                    <u--input v-model="formData.password" :password="showPwd" placeholder="请输入密码" border="bottom">
                        <template slot="suffix">
                            <u-icon
                                v-if="formData.password && showPwd"
                                name="eye-off"
                                size="18"
                                @click="changePassword"
                            ></u-icon>
                            <u-icon
                                v-else-if="formData.password && !showPwd"
                                name="eye-fill"
                                size="18"
                                @click="changePassword"
                            ></u-icon>
                        </template>
                    </u--input>
                </u-form-item>
            </u--form>
        </view>
        <view class="login-text">
            <view class="login-text-main">
                <u--text type="primary" text="验证码登录"></u--text>
            </view>
            <view class="login-text-main">
                <u--text type="primary" text="忘记密码"></u--text>
            </view>
        </view>
        <!-- 同意条款 -->
        <view class="login-agree">
            <u-checkbox-group>
                <u-checkbox v-model="checked" label=""></u-checkbox>
            </u-checkbox-group>
            <u--text text="我已阅读并同意" size="14"></u--text>
            <u--text text="《用户协议》" size="14" type="primary"></u--text>
            <u--text text="《隐私政策》" size="14" type="primary"></u--text>
        </view>
        <view class="login-btn">
            <u-button type="primary" text="登录" @click="login"></u-button>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            tabList: [
                {
                    name: '个人用户',
                    icon: 'icon-shouye'
                },
                {
                    name: '法人用户',
                    icon: 'icon-fenlei'
                }
            ],
            rules: {
                account: {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                password: {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                }
            },
            formData: {
                account: '',
                password: ''
            },
            showPwd: true,
            checked: false
        };
    },
    computed: {},
    methods: {
        tabClick() {},
        changePassword() {
            this.showPwd = !this.showPwd;
        }
    }
};
</script>
<style lang="scss">
.lg-img-title {
    text-align: center;
    padding-top: 150px;
}
.lg-img {
    width: 100px;
    height: auto;
    object-fit: cover;
}
.lg-tab {
    ::v-deep .u-tabs__wrapper__nav__item__text {
        font-size: 34rpx;
    }
}
.lg-tab-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40rpx;
}
.lg-tab-content {
    padding: 60rpx 80rpx 20rpx;
}
.login-text {
    display: flex;
    justify-content: space-around;
}
.login-agree {
    display: flex;
    margin-top: 40rpx;
    margin-left: 80rpx;
    margin-bottom: 30rpx;
}
.u-text {
    flex: none;
    width: auto;
}
.login-text-main {
    margin-right: 80rpx;
}
.login-btn {
    padding: 0 80px;
    margin-top: 20rpx;
}
</style>
